<template>
  <div>
    <!-- 确保ID与你的图表对应 -->
    <div id="home2zuo32" class="charts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"; // 确保已经安装了echarts并正确导入

export default {
  mounted() {
    this.initEcharts();
    window.addEventListener("resize", this.handleWindowResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleWindowResize);
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(document.getElementById("home2zuo32"));

      // 基于准备好的dom，初始化echarts实例

      const option = {
        series: [
          {
            type: "pie",
            radius: ["130%", "150%"], // 放大图形
            center: ["50%", "80%"], // 往下移动  套住75%文字
            label: {
              show: false,
            },
            startAngle: 180,
            hoverOffset: 0, // 鼠标经过不变大
            data: [
              {
                value: 100,
                itemStyle: {
                  // 颜色渐变#00c9e0->#005fc1
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: "#00c9e0" },
                      { offset: 1, color: "#005fc1" },
                    ],
                  },
                },
              },
              { value: 100, itemStyle: { color: "#12274d" } }, // 颜色#12274d

              { value: 200, itemStyle: { color: "transparent" } }, // 透明隐藏第三块区域
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    handleWindowResize() {
      this.$nextTick(() => {
        this.myCharts.forEach((chart) => chart.resize());
      });
    },
  },
  data() {
    return {
      myCharts: [], // 用于存储所有echarts实例，以便在窗口调整大小时重新调整图表
    };
  },
};
</script>
